<style lang="less">
	page{
		background: #f6f6f6;
		padding-bottom: 60rpx;
	}
	// .content {
	// 	text-align: center;
	// 	margin-top: 20upx;
	// 	padding: 0 30upx;
	// 	box-sizing: border-box;
	// 	.main-list{
	// 		position: relative;
	// 		background: #FFFFFF;
	// 		box-shadow:0px 8upx 18upx 2upx rgba(221,221,221,0.3);
	// 		border-radius:12upx;
	// 		margin-top: 20upx;
	// 		overflow: hidden;
	// 		.main-list-title{
	// 			display: flex;
	// 			background:rgba(51,51,51,1);
	// 			padding: 10upx 30upx;
	// 			align-items: center;
	// 			justify-content: space-between;
	// 			box-sizing: border-box;
	// 			.main-list-title-fl{
	// 				font-size:26upx;
	// 				font-weight:bold;
	// 				color:rgba(219,194,145,1);
	// 				line-height:36upx;
	// 				width: 60%;
	// 				text-align: left;
	// 			}
	// 			.main-list-title-fr{
	// 				width: 40%;
	// 				text-align: right;
	// 				.time{
	// 					font-size:20upx;
	// 					font-weight:500;
	// 					color:rgba(219,194,145,1);
	// 					line-height:36upx;
	// 				}
					
	// 			}
	// 		}
	// 		.main-list-main{
	// 			padding: 20upx 30upx;
	// 			box-sizing: border-box;
	// 			display: flex;
	// 			.main-list-main-fl{
	// 				width: 45%;
	// 				.fl-img{
	// 					width: 100%;
	// 					height: auto;
	// 				}
	// 				.fl-num{
	// 					display: inline-block;
	// 					text-align: center;
	// 					font-size:20upx;
	// 					font-weight:500;
	// 					color:rgba(219,194,145,1);
	// 					line-height:40upx;
	// 					border:1px solid rgba(219,194,145,1);
	// 					border-radius:20px;
	// 					padding: 0 20upx;
	// 					margin-top: 10upx;
	// 				}
	// 			}
	// 			.main-list-main-fr{
	// 				width: 55%;
	// 				margin-left: 20upx;
	// 				.fr-name{
	// 					text-align: left;
	// 					font-size:22upx;
	// 					font-weight:500;
	// 					color:rgba(51,51,51,1);
	// 					line-height:28upx;
	// 					min-height: 84upx;
	// 					// height: 108upx;
	// 					// overflow:hidden;
	// 					// text-overflow:ellipsis;
	// 					// display:-webkit-box;
	// 					// -webkit-box-orient:vertical;
	// 					// -webkit-line-clamp:3;
	// 				}
	// 				.fr-mian{
	// 					height: 100upx;
	// 					display: flex;
	// 					white-space: nowrap;
	// 					justify-content: flex-start;
	// 					text-align: left;
	// 					margin-top: 10upx;
	// 					.fr-mian-for{
	// 						display: inline-block;
	// 						.fr-mian-img{
	// 							margin-right: 10upx;
	// 							width: 100upx;
	// 							height: 100upx;
	// 							display: inline-block;
	// 						}
	// 					}
						
	// 				}
	// 				.fr-bot{
	// 					text-align: left;
	// 					.fr-bot-fl{
	// 						font-size:20upx;
	// 						font-weight:500;
	// 						color:rgba(153,153,153,1);
	// 						line-height:30upx;
	// 						// overflow:hidden;
	// 						// text-overflow:ellipsis;
	// 						// display:-webkit-box;
	// 						// -webkit-box-orient:vertical;
	// 						// -webkit-line-clamp:3;
	// 					}
	// 					.fr-bot-fr{
	// 						font-size:20upx;
	// 						font-weight:500;
	// 						color:#DBC291;
	// 						line-height:30upx;
	// 					}
	// 				}
	// 			}
	// 		}
	// 	}
	// 	.main-list-pm{
	// 		.main-list-pm-img{
	// 			position: relative;
	// 			.imgture{
	// 				width: 100%;
	// 				height: auto;
	// 			}
	// 		}
	// 		.main-list-pm-bot{
	// 			display: flex;
	// 			padding: 10upx 30upx;
	// 			box-sizing: border-box;
	// 			justify-content: space-between;
	// 			.main-list-title-fl{
	// 				font-size:24upx;
	// 				color:rgba(51,51,51,1);
	// 				line-height:36upx;
	// 				width: 60%;
	// 				text-align: left;
	// 			}
	// 			.main-list-title-fr{
	// 				width: 40%;
	// 				text-align: right;
	// 				.time{
	// 					font-size:20upx;
	// 					font-weight:500;
	// 					color:rgba(153,153,153,1);
	// 					line-height:30upx;
	// 				}
					
	// 			}
	// 		}
	// 	}
	// 	.pos{
	// 		position: absolute;
	// 		bottom: 0;
	// 		left: 0;
	// 		font-size:20upx;
	// 		font-weight:500;
	// 		color:rgba(219,194,145,1);
	// 		line-height:40upx;
	// 		background:rgba(51,51,51,1);
	// 		display: inline-block;
	// 		padding: 0 10upx;
	// 		border-radius:0px 12upx 0px 12upx;
	// 	}
	// }
	.main{
		margin-top: 10upx;
	}
	.main_top{
		background: #FFFFFF;
		
		.main_title{
			display: inline-block;
			width: 50%;
			height: 100upx;
			line-height: 100upx;
			font-size: 28upx;
			font-weight: 500;
			color: #333333;
			text-align: center;
		}
		.active{
			color: #DBC191;
			position: relative;
		}
		.active::after{
			position: absolute;
			content: '';
			display: block;
			width: 80upx;
			height: 6upx;
			border-radius: 4upx;
			background: #DBC191;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}
	.main_content{
		padding: 0 30upx;
		box-sizing: border-box;
		.main_list{
			margin-top: 20upx;
			.main_content_img{
				width: 100%;
				height: 300upx;
				border-radius: 12upx;
			}
		}
	}
	.notAvailable {
		margin: 100upx 0;
		text-align: center;
		image {
			width: 200upx;
			height: 200upx;
		}
	
		view {
			margin-top: 30rpx;
			font-size: 30upx;
			font-weight: bold;
			color: #999999;
			line-height: 30upx;
		}
	}
</style>
<template>
	<view class="content">
		
		<view class="main">
			<view class="main_top">
				<view :class="['main_title',tabIndex == 1 ? 'active' : '']" @tap="tabCur(1)">进行中</view>
				<view :class="['main_title',tabIndex == 2 ? 'active' : '']" @tap="tabCur(2)">已结束</view>
			</view>
			<view class="notAvailable" v-if="totalPage == 0">
				<image src="https://static.xpandago.net/wechat/images/notAvailable.png" class="" mode="widthFix"></image>
				<view>暂无数据</view>
			</view>
			<view class="main_content" v-else>
				<view class="main_list" v-for="(v,i) in list" :key="i">
					<image :src="http + v.pic" class="main_content_img" mode="widthFix" @tap="jumps(v.content)"></image>
				</view>
			</view>
		</view>
		<!-- <view class="main-list" v-for="(itme,i) in list">
			<view class="main-list-for" v-if="itme.activityType==0">
				<view class="main-list-title">
					<view class="main-list-title-fl">{{itme.giftName}}</view>
					<view class="main-list-title-fr">
						<view class="time">从{{itme.startTime}}</view>
						<view class="time">至{{itme.endTime}}</view>
					</view>
				</view>
				<view class="main-list-main">
					<view class="main-list-main-fl">
						<image v-if="itme.light == 1" src='https://static.xpandago.net/wechat/images/gray_panda@2x.png' class="fl-img" mode="widthFix"></image>
						<image v-else-if="itme.light == 2" src='https://static.xpandago.net/wechat/images/half_panda@2x.png' class="fl-img" mode="widthFix"></image>
						<image v-else-if="itme.light == 3" src='https://static.xpandago.net/wechat/images/ahalf_panda@2x.png' class="fl-img" mode="widthFix"></image>
						<image v-else-if="itme.light == 4" src='https://static.xpandago.net/wechat/images/gold_panda@2x.png' class="fl-img" mode="widthFix"></image>
						<view class="fl-num" v-if="itme.statisticsDimension==1">已售:{{itme.total}}</view>
						<view class="fl-num" v-else-if="itme.statisticsDimension==2">业绩 ¥ {{itme.count}}</view>
						<view class="fl-num" v-else-if="itme.statisticsDimension==3">销售额 ¥{{itme.totalSales}}</view>
						<view class="fl-num" v-else-if="itme.statisticsDimension==4">销售额 ¥{{itme.totalSales}}</view>
						<view class="fl-num" v-else-if="itme.statisticsDimension==5">销售:{{itme.orderNum}}笔订单</view>
					</view>
					<view class="main-list-main-fr">
						<view class="fr-name">{{itme.giftDetail}}</view>
						<scroll-view class="fr-mian" scroll-x="true">
							<view v-if="itme.goodsPhotoList != '' && itme.goodsPhotoList !=null" class="fr-mian-for" v-for="(list,i) in itme.goodsPhotoList">
								<image :src= "'https://static.xpandago.net'+'/'+list" class="fr-mian-img"></image>
							</view>
						</scroll-view>
						<view class="fr-bot" @tap="guize(itme.giftpackSaleId)">
							<view class="fr-bot-fl">{{itme.note}}</view>
							<view class="fr-bot-fr">点击查看活动规则 >></view>
				        </view>
					</view>
				</view>
				<view class="pos" v-if="itme.status == 1">未开始</view>
				<view class="pos" v-else-if="itme.status == 2">进行中</view>
				<view class="pos" v-else-if="itme.status == 3">已结束</view>
			</view>
			<view class="main-list-pm" v-else-if="itme.activityType == 1" @tap="xiangqing(itme.only)">
				<view class="main-list-pm-img">
					<image :src= "'https://static.xpandago.net'+'/'+itme.activityPicture" class="imgture" mode="widthFix"></image>
					<view class="pos" v-if="itme.status == 1">未开始</view>
					<view class="pos" v-else-if="itme.status == 2">进行中</view>
					<view class="pos" v-else-if="itme.status == 3">已结束</view>
				</view>
				<view class="main-list-pm-bot">
					<view class="main-list-title-fl">{{itme.giftName}}</view>
					<view class="main-list-title-fr">
						<view class="time">从{{itme.startTime}}</view>
						<view class="time">至{{itme.endTime}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="uni-loadmore" v-if="showLoadMore==true">{{loadMoreText}}</view>
	</view>
</template>
<script>
	import api from '@/common/api';
	import webView from '@/common/webView'
	export default {
		data() {
			return {
				tabIndex:1,
				page: 1,
				totalPage: 0,
				list:[],
				token:'',
				loadMoreText: "加载中...",
				showLoadMore: false,
				http:api.httpImg,//图片前缀
			}
		},
		onLoad() {
			// let token = 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiLmtYvor5XpnLgiLCJhdWRpZW5jZSI6ImUxMGFkYzM5NDliYTU5YWJiZTU2ZTA1N2YyMGY4ODNlIiwidXNlcl9pZCI6NzA0NjQsImNyZWF0ZWQiOjE2NDE1MjQ4Nzg5MjUsImV4cCI6MTY0NDExNjg3OCwidXNlcl9ncm91cF9pZCI6bnVsbCwicGxhdGZvcm0iOm51bGx9.A5xBmYNZWnJBHo1BG3JBjjtaUF3TKwo-Cof8xaQ-8rIBsl0bnyDZnH9ORlhHm91j0sqoJhL-S7vy1e0TUHyMTQ'
			// uni.setStorageSync('token', token);
			// this.token = token 
			// this.getParentWeChatCode()
			let that=this
			let userStr = navigator.userAgent
			
			if (userStr.indexOf('Android') !== -1) {
			  that.token = window.Android.getUserToken();
			  let token=that.token
			  uni.setStorageSync('token', token);
			  that.getParentWeChatCode()
			} else {
			  webView.callhandler('getUserToken', {}, (data) => {
				uni.setStorageSync('token', data);
			    that.token = data;
				that.getParentWeChatCode()
			  })
			}
		},
		//下拉刷新
		 onPullDownRefresh() {
			this.page=1;
			this.list = [];
			this.getParentWeChatCode();
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		onReachBottom() {
			if(this.totalPage == 0){
				return false
			}
			this.showLoadMore = true;
			if (this.page >= this.totalPage) {
				this.loadMoreText = "没有更多数据了!"
				setTimeout(() => {
					this.showLoadMore = false;
				}, 1500);
				return;
			}else{
				this.loadMoreText = "加载中..."
				setTimeout(() => {
					this.page++
					this.getParentWeChatCode()
				}, 500);
			}
		},
		methods: {
			jumps(url){
				let userStr = navigator.userAgent
				if (userStr.indexOf('Android') !== -1) {
					let params={type:'activity',content:url}
					let paramsInfo=JSON.parse(JSON.stringify(params))
					window.Android.showInfoFromJs(JSON.stringify(paramsInfo))
				} else {
					window.location.href = url
				}
				
			},
			tabCur(index){
				if(this.tabIndex == index){
					return false
				}
				this.page = 1
				this.list = []
				this.tabIndex = index
				this.getParentWeChatCode()
			},
			async getParentWeChatCode(){
				const [err, res] = await api.giftsaleOne({
					query:{
						page: this.page,
						advertisingStatus: this.tabIndex
					},
					 header:{
						'Content-Type': 'application/json',
						'token': this.token
					 }
				 });
				 if(res.data.code == 0){
					 let result = res.data.data
					 if(Boolean(result.list) != false){
						 this.list = [...this.list,...result.list]
					 }
					 if(Boolean(result.totalPage) != false){
						 this.showLoadMore = false;
						 this.totalPage = result.totalPage
					 }else{
						 this.totalPage = 0
					 }
				 }else{
					 uni.showToast({
					 	title: res.data.msg,
					 	icon: 'none'
					 })
				 }
			}
		}
	}
</script>
